<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="display: flex">
  <div style="position: relative;">
    <div style="width: 100px;height: 20px;border: 2px solid red;z-index: 1">
      <div class="hovable">1111111111111111111111111111111111 11111111111111111111111111111111111</div>
    </div>
  </div>
  <div style="position: relative;">
    <div style="width: 100px;height: 20px;border: 2px solid red;z-index: 2">
      <div class="hovable">2111111111111111111111111111111111 11111111111111111111111111111111112</div>
    </div>
  </div>
  <div style="position: relative">
    <div style="width: 100px;height: 20px;border: 2px solid red;z-index: 3">
      <div class="hovable">3111111111111111111111111111111111 11111111111111111111111111111111113</div>
    </div>
  </div>
</div>
<div style="display: flex">
  <div style="position: relative">
    <div style="width: 100px;height: 20px;border: 2px solid red;z-index: 4">
      <div class="hovable">4111111111111111111111111111111111 11111111111111111111111111111111114</div>
    </div>
  </div>
  <div style="position: relative;">
    <div style="width: 100px;height: 20px;border: 2px solid red;z-index: 5">
      <div class="hovable">5111111111111111111111111111111111 11111111111111111111111111111111115</div>
    </div>
  </div>
  <div style="position: relative">
    <div style="width: 100px;height: 20px;border: 2px solid red;z-index: 6">
      <div class="hovable">6111111111111111111111111111111111 11111111111111111111111111111111116</div>
    </div>
  </div>
</div>
</body>
</html>
<style>
  .hovable{
    white-space:normal;
    position:absolute;
    border: 1px solid blue;
    width: 500px;
    height: 200px;
    border-radius: 3px;
    background-color: white
  }
  .hovable:hover{
    z-index: 10000;
    width: 800px;
    height: 350px;
  }
</style>